<template>
  <div>
    <!-- 添加按钮 -->
<el-button @click="willAdd" type="primary">添加</el-button>
       <!-- 表格 -->
         <list-vue @willUpdate="willUpdate" :arr="arr" @init="getlist"></list-vue>
         <!-- 弹框 -->
         <form-vue :info="info" :arr="arr" @init="getlist" ref="form"></form-vue>
       
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import formVue from './components/form.vue'
import listVue from './components/list.vue'
import { reqmenulist } from "../../http/api";
export default {

  components:{
    formVue,
    listVue,
  },
  props: [],
  data() {
    return {
      //1.初始化弹框出现的状态
      info:{
        isshow:false,
        isAdd:true
      },
      arr:[],
    };
  },
  computed: {
    ...mapGetters({}),
  },
  mounted() {
    this.getlist()
  },
  methods: {
    ...mapActions({}),
    //点了添加
    willAdd(){
      this.info.isshow = true;
      this.info.isAdd = true;

    },
    //点了编辑
    willUpdate(id){
      this.info.isshow = true;
      this.info.isAdd = false;
      //让form调用请求
      this.$refs.form.getOne(id)
    },
    getlist(){
      reqmenulist({istree:true}).then((res)=>{
        if(res.data.code==200){
          this.arr = res.data.list ? res.data.list :[]
        }
      })
    }
  },
};
</script>
<style scoped lang="less">
@import "../../less/index.less";

.el-button{
  margin: @margin20 0;
}
</style>